<template>
   <div class="tab-bar-item" @click="itemClick">
       <div  v-if= "!isActive">
            <slot name="item-icon"></slot>
       </div>
       <div v-else>
            <slot name="item-icon-active"></slot>
       </div>
       <div :style="activeStyle">
            <slot name="item-text"></slot>
       </div>
    </div>
</template>




<script>
export default {
    name: "TabBarItem",
    props: {
        path:String,
        activeColor:{
            type: String,
            default: 'red'
        }
    },
    data(){
        return {
            // isActive: true
        }
    },
    computed:{
        isActive(){
            return this.$route.path.indexOf(this.path) !== -1
        },
        activeStyle(){
            return this.isActive ? {color: this.activeColor} : {}
        },
    },
    methods:{
        itemClick(){
            // 不可以返回上一个点击的页面
            this.$router.replace(this.path)
            // 可以返回上一个点击的页面
            // this.$router.push(this.path)
        }
    }
}
</script>

<style scoped>
.tab-bar-item {
		flex: 1;
		text-align: center;
		height: 49px;
        font-size: 14px;
	}
    i{
        margin-top: 5px;
        vertical-align: middle;
        margin-bottom: 2px;
        font-size: 20px;
    }
    .active{
        color: red;
    }
</style>

